<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作css</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .red {
            background-color: #F00;
        }
        
        .green {
            background-color: #0F0;
        }
        
        .blue {
            background-color: #00F;
        }
        
        div {
            margin: auto;
            width: 300px;
            height: 300px;
            border: #00F 1px solid;
        }
    </style>
    <script src="./res/jquery-3.5.1.min.js"></script>
</head>

<body>
    <button id="btn_red">红色</button>
    <button id="btn_green">绿色</button>
    <button id="btn_toggle">toggle</button>
    <button id="btn">我走了</button>
    <div id="box" class="a b c d e"></div>
</body>

</html>
<script>
    $(function(e) {
        $('#btn_red').click(function(e) {
            e.preventDefault();
            let classes = $('div').attr('class');
            if (undefined != classes) {
                $('div').removeClass(classes);
            }
            $('div').addClass('red');
        });
        $('#btn_green').click(function(e) {
            e.preventDefault();
            let classes = $('div').attr('class');
            if (undefined != classes) {
                $('div').removeClass(classes);
            }
            $('div').addClass('green');
        });
        $('#btn_toggle').click(function(e) {
            e.preventDefault();
            $('div').toggleClass('blue');
        });
        $('#btn').click(function(e) {
            e.preventDefault();
            $('div').css({
                "background-color": "yellow",
            });
        });
    });
</script>